<template>
  <el-dialog v-model="dialogFormVisible" @close="handleClose" :close-on-click-modal="false" :title="title" width="960px">
    <el-form
        v-loading="editLoading"
        ref="formRef"
        label-width="150px"
        :model="form"
        style="padding: 30px"
        :rules="rules"
    >
      <el-form-item label="广告商名称：" required prop="nickname">
        <el-input v-model="form.nickname" autocomplete="off" maxlength="200" placeholder="广告商名称"/>
      </el-form-item>
      <el-form-item label="手机：" required prop="telephone">
        <el-input v-model="form.telephone" autocomplete="off" maxlength="11" placeholder="手机"/>
      </el-form-item>
      <el-form-item label="充值金额：" required prop="price">
        <el-input-number v-model="form.price" autocomplete="off" maxlength="200" placeholder="充值金额"/>
      </el-form-item>
      <el-form-item label="描述信息：" required prop="description">
        <el-input type="textarea" v-model="form.description" autocomplete="off" maxlength="200" placeholder="描述信息"/>
      </el-form-item>
      <el-form-item label="启用状态："   required prop="status">
        <el-radio-group v-model="form.status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <div class="dialog-footer" style="text-align: center">
        <el-button @click="handleClose" icon="remove">取消</el-button>
        <el-button type="primary" :loading="suLoading" @click="handleSubmit" icon="plus">保存</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>
<script setup>
import {saveUpdate, getById} from '@/api/advert/advertment.js'
import KVA from '@/utils/kva.js'
import debounce from '@/utils/debounce'
const emits = defineEmits(["load"])
// 控制弹窗得显示
const dialogFormVisible = ref(false)
// 这个数据模型
let form = ref({
  nickname: "",
  telephone: "",
  price: 0,
  description: "",
  status: 1,
})

// 弹出标题
const title = ref("添加")
const editLoading = ref(false)
const suLoading = ref(false)
// 表单ref, 用于提交最终得验证处理
const formRef = ref({})
// 表单验证
const rules = reactive({
  "nickname": [{required: true, message: '请输入名称', trigger: 'blur'}]
})

// 打开修改密码的弹窗
const handleOpen = async (opid) => {
  // 每次打开头重置
  dialogFormVisible.value = true;
  title.value = "添加"
  if (opid) {
    title.value = "编辑"
    editLoading.value = true;
    const resp = await getById(opid)
    editLoading.value = false;
    form.value = resp.data
    title.value = "编辑【" + form.value.nickname + "】"
  }
}


// 保存和修改
const handleSubmit = () => {
  suLoading.value = true
  debounce(()=>{
    formRef.value.validate(async (valid, fields) => {
      if (valid) {
        try{
          await saveUpdate(form.value)
          suLoading.value = false
          // 提示保存成功
          KVA.notifySuccess(form.value.id?"更新成功":"保存成功")
          // 关闭弹窗
          handleClose()
          // 刷新方法
          emits("load")
        }catch(ex){
          suLoading.value = false
        }
      }else{
        suLoading.value = false
      }
    })
  },600)
}

const handleClose = () => {
  formRef.value.resetFields()
  form.value = {
    nickname: "",
    telephone: "",
    price: 0,
    description: "",
    status: 1,
  }
  suLoading.value = false
  editLoading.value = false
  dialogFormVisible.value = false
}


// 把弹出打开得方法暴露给父组件进行调用
defineExpose({
  handleOpen
})
</script>